<template>
  <div>
   

    <h2>全球榜</h2>
    <div class="gobalList">
      <ul>
        <li v-for="i in gobalList" :key="i.id" @click="togd(i.id)">
          <div>
            <img :src="i.coverImgUrl" alt="" />
            <span class="count">
              <i class="el-icon-caret-right"></i>
              {{ getPlayCount(i.playCount) }}</span
            >
          </div>
          <span class="name">{{ i.name }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      officalList: [],
      gobalList: [],
      officalData:[]
    };
  },
  methods: {
    togd(id) {
      this.$router.push({ name: "songlist", query: { id: id } });
    },
    async init(){
    const res=  await this.$request({
      url: "/toplist",
    })
    this.gobalList=res.data.list
   
   
    }
  },
  computed: {
    getPlayCount() {
      return function (count) {
        if (count >= 10000) {
          count = parseInt(count / 10000);
          return count + "万";
        } else {
          return count;
        }
      };
    },
  },
  mounted() {
   this.init()
  },
};
</script>

<style scoped >
h2 {
  margin-bottom: 20px;
}

.gobalList ul {
  display: flex;
  flex-wrap: wrap;
}
.gobalList ul li {
  position: relative;
  width: 191px;
  padding: 10px 10px;
  margin-bottom: 20px;
}
.gobalList ul li img {
  width: 181px;
  height: 181px;
  border-radius: 10px;
}
.name {
  display: inline-block;
  margin-top: 10px;
}
.count {
  position: absolute;
  right: 10px;
  top: 15px;
  color: white;
  font-size: 14px;
}
</style>